import * as React from "react";
import "./Order.less";
import {OrderModel} from "../../model/OrderModel";
import url, {getJSON} from "../../url";
import {AjaxModel} from "../../model/AjaxModel";
import {checkLoginStatus} from "../../utils";
import OrderItem from "./OrderItem";
import OrderAllInfo from "./OrderAllInfo";
import Tabbar from "../Components/Tabbar/Tabbar";
import Back from "../Components/Back/Back";

declare const wx: any;
declare const weui: any;

export interface OrderProps {

}

export interface State {
    currentIndex: number,
    OrderList: OrderModel[]
}

export default class Order extends React.Component<OrderProps, State> {
    //默认属性
    static readonly defaultProps: OrderProps = {};

    constructor(props: OrderProps) {
        super(props);
        //默认状态
        this.state = {
            currentIndex: 0,
            OrderList: []
        };
    }

    //组件挂载后回调
    componentDidMount() {
        document.title = "我的订单";
        this.getOrderList();
    }

    // 获取订单列表

    getOrderList = () => {
        getJSON(url.apiOrderList, {status: this.state.currentIndex + 1}, (res: AjaxModel) => {
            checkLoginStatus(res, () => {
                if (res.code === 200) {
                    this.setState({OrderList: res.data.order})
                } else {
                    weui.alert(res.msg)
                }
            })
        })
    };

    render() {
        const tabs = ['待确认', '已发货', '待收货'];
        return <div className="Order">
            <Back/>
            <div className="tabs">
                {tabs.map((item, index) => {
                    return <div onClick={() => {
                        this.setState({currentIndex: index}, () => {
                            this.getOrderList()
                        })
                    }} className={`tab-item ${this.state.currentIndex === index ? 'current' : ''}`}>{item}</div>
                })}
            </div>
            <div className="content">
                {this.state.OrderList.map((item, index) => {
                    const OrderList = this.state.OrderList;
                    if (item.showAll) {
                        return <OrderAllInfo item={item} onChange={() => {
                            OrderList[index].showAll = false;
                            this.setState({OrderList})
                        }}/>
                    } else {
                        return <OrderItem item={item} onChange={() => {
                            OrderList[index].showAll = true;
                            this.setState({OrderList})
                        }}/>
                    }
                })}

                {this.state.OrderList.length < 1 ? <p className={'null-tips'}>暂时没有符合条件的订单</p> : null}
            </div>

            <Tabbar show={'order'}/>

        </div>
    }
}
